<template>
  <div id="taylor-swift-page">
    <header>
      <h1>欢迎来到 Taylor Swift 的世界 🎤</h1>
    </header>

    <main>
      <!-- 图片轮播 -->
      <section class="carousel">
        <img :src="currentImage" alt="Taylor Swift" />
        <div class="controls">
          <button @click="prevImage">⬅️ 上一张</button>
          <button @click="nextImage">下一张 ➡️</button>
        </div>
      </section>

      <!-- 简介 -->
      <section class="bio">
        <h2>个人简介</h2>
        <p>
          Taylor Alison Swift 是一位美国创作歌手，以其歌词中的叙事能力和音乐风格的多样性而闻名。
          她从乡村音乐起步，后来转向流行、电子以及独立民谣等风格。
        </p>
      </section>

      <!-- 音乐播放器 -->
      <section class="music-player">
        <h2>经典歌曲试听：Love Story</h2>
        <audio controls>
          <source src="@/assets/love-story.mp3" type="audio/mpeg" />
          您的浏览器不支持音频播放。
        </audio>
      </section>
    </main>

    <footer>
      <p>© 2025 Taylor Swift 粉丝页面 - 非官方作品</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'TaylorSwift',
  data() {
    return {
      images: [
        require('@/assets/taylor1.jpg'),
        require('@/assets/taylor2.jpg'),
        require('@/assets/taylor3.jpg')
      ],
      currentIndex: 0
    };
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex];
    }
  },
  methods: {
    prevImage() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    },
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    }
  }
};
</script>

<style scoped>
#taylor-swift-page {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  color: #c92e8a;
}

main {
  max-width: 960px;
  margin: auto;
}

.carousel {
  text-align: center;
  margin-bottom: 20px;
}

.carousel img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.controls {
  margin-top: 10px;
}

.controls button {
  margin: 0 10px;
  padding: 10px 20px;
  background-color: #c92e8a;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.controls button:hover {
  background-color: #b02675;
}

.bio {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.music-player {
  text-align: center;
}

.music-player h2 {
  margin-bottom: 10px;
}

audio {
  width: 100%;
  max-width: 600px;
}

footer {
  margin-top: 40px;
  text-align: center;
  color: #777;
}
</style>